<template>
  <div class="order-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button icon="el-icon-back" @click="goBack" plain>返回</el-button>
        <h2>订单管理</h2>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="refreshOrders" plain>
          <i class="el-icon-refresh"></i>
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 统计信息 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-content">
            <div class="stats-icon">
              <i class="el-icon-s-order"></i>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ totalOrders }}</div>
              <div class="stats-label">总订单数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-content">
            <div class="stats-icon pending">
              <i class="el-icon-time"></i>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ pendingPaymentOrders }}</div>
              <div class="stats-label">待付款</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-content">
            <div class="stats-icon confirmed">
              <i class="el-icon-truck"></i>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ inTransitOrders }}</div>
              <div class="stats-label">运输中</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stats-card">
          <div class="stats-content">
            <div class="stats-icon completed">
              <i class="el-icon-circle-check"></i>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ completedOrders }}</div>
              <div class="stats-label">已完成</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
        v-model="searchQuery"
        placeholder="搜索订单号/商品名称"
        clearable
        @clear="handleSearch"
        @input="handleSearch"
        style="width: 300px"
      >
        <template #prefix>
          <i class="el-icon-search"></i>
        </template>
      </el-input>
      <el-select
        v-model="statusFilter"
        placeholder="订单状态"
        clearable
        @change="handleSearch"
        style="width: 150px; margin-left: 10px"
      >
        <el-option label="待付款" value="待付款" />
        <el-option label="已完成" value="已完成" />
        <el-option label="已取消" value="已取消" />
        <el-option label="待发货" value="待发货" />
        <el-option label="运输中" value="运输中" />
        <el-option label="待收货" value="待收货" />
        <el-option label="退货中" value="退货中" />
        <el-option label="换货中" value="换货中" />
        <el-option label="退款中" value="退款中" />
        <el-option label="部分退款" value="部分退款" />
        <el-option label="已拒收" value="已拒收" />
        <el-option label="售后处理中" value="售后处理中" />
        <el-option label="冻结" value="冻结" />
      </el-select>
    </div>

    <!-- 订单表格 -->
    <el-table
      v-loading="loading"
      :data="filteredOrders"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="orderId"
        label="订单号"
        width="220"
      />
      <el-table-column
        prop="productTitle"
        label="商品"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="buyerNickname"
        label="买家"
        width="120"
      />
      <el-table-column
        prop="sellerNickname"
        label="卖家"
        width="120"
      />
      <el-table-column
        prop="price"
        label="价格"
        width="100"
      >
        <template #default="{ row }">
          ¥{{ row.price ? row.price.toFixed(2) : '0.00' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="100"
      >
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusLabel(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
      >
        <template #default="{ row }">
          {{ formatDate(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="300"
        fixed="right"
      >
        <template #default="{ row }">
          <div style="display: flex; flex-wrap: nowrap; gap: 5px;">
          <template v-if="row.status === '待付款'">
            <el-button
              size="small"
              @click="handleUpdateStatus(row, '待发货')"
              plain
            >
              发货
            </el-button>
            <el-button
              size="small"
              class="delete-btn"
              @click="handleUpdateStatus(row, '已取消')"
              plain
            >
              取消
            </el-button>
          </template>
          <template v-if="row.status === '待发货'">
            <el-button
              size="small"
              @click="handleUpdateStatus(row, '运输中')"
              plain
            >
              开始运输
            </el-button>
          </template>
          <template v-if="row.status === '运输中'">
            <el-button
              size="small"
              @click="handleUpdateStatus(row, '待收货')"
              plain
            >
              到达目的地
            </el-button>
          </template>
          <template v-if="row.status === '待收货'">
            <el-button
              size="small"
              @click="handleUpdateStatus(row, '已完成')"
              plain
            >
              确认收货
            </el-button>
            <el-button
              size="small"
              class="delete-btn"
              @click="handleUpdateStatus(row, '已拒收')"
              plain
            >
              拒收
            </el-button>
          </template>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 订单详情对话框 -->
    <el-dialog
      title="订单详情"
      v-model="detailDialogVisible"
      width="600px"
    >
      <div v-if="currentOrder" class="order-detail">
        <div class="detail-item">
          <span class="label">订单号：</span>
          <span>{{ currentOrder.orderId }}</span>
        </div>
        <div class="detail-item">
          <span class="label">商品：</span>
          <span>{{ currentOrder.productTitle }}</span>
        </div>
        <div class="detail-item">
          <span class="label">买家：</span>
          <span>{{ currentOrder.buyerNickname }}</span>
        </div>
        <div class="detail-item">
          <span class="label">卖家：</span>
          <span>{{ currentOrder.sellerNickname }}</span>
        </div>
        <div class="detail-item">
          <span class="label">价格：</span>
          <span>¥{{ currentOrder.price ? currentOrder.price.toFixed(2) : '0.00' }}</span>
        </div>
        <div class="detail-item">
          <span class="label">状态：</span>
          <el-tag :type="getStatusType(currentOrder.status)">
            {{ getStatusLabel(currentOrder.status) }}
          </el-tag>
        </div>
        <div class="detail-item">
          <span class="label">创建时间：</span>
          <span>{{ formatDate(currentOrder.createTime) }}</span>
        </div>
        <div class="detail-item">
          <span class="label">更新时间：</span>
          <span>{{ formatDate(currentOrder.updateTime) }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message, MessageBox } from 'element-ui'
import orderService from '@/services/order.service'
import userService from '@/services/user.service'
import productService from '@/services/product.service'

export default {
  name: 'OrderManagement',
  data() {
    return {
      orders: [],
      users: [],
      products: [],
      loading: false,
      searchQuery: '',
      statusFilter: '',
      detailDialogVisible: false,
      currentOrder: null
    }
  },
  computed: {
    // 过滤订单列表
    filteredOrders() {
      let result = this.orders

      // 状态过滤
      if (this.statusFilter) {
        result = result.filter(order => order.status === this.statusFilter)
      }

      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(order => 
          (order.orderId && order.orderId.toLowerCase().includes(query)) ||
          (order.productTitle && order.productTitle.toLowerCase().includes(query))
        )
      }

      return result
    },

    // 总订单数
    totalOrders() {
      return this.orders.length
    },

    // 待付款订单数
    pendingPaymentOrders() {
      return this.orders.filter(order => order.status === '待付款').length
    },

    // 运输中订单数
    inTransitOrders() {
      return this.orders.filter(order => order.status === '运输中').length
    },

    // 已完成订单数
    completedOrders() {
      return this.orders.filter(order => order.status === '已完成').length
    }
  },
  mounted() {
    this.initializeData()
  },
  methods: {
    // 初始化数据
    async initializeData() {
      try {
        // 并行加载基础数据
        await Promise.all([
          this.fetchUsers(),
          this.fetchProducts()
        ])
        
        // 基础数据加载完成后，再加载订单数据
        await this.fetchOrders()
      } catch (error) {
        console.error('初始化数据失败:', error)
      }
    },

    // 返回上一页或首页
    goBack() {
      if (this.$route.query.from === 'dashboard') {
        this.$router.push('/dashboard')
      } else {
        this.$router.go(-1)
      }
    },

    // 刷新订单数据
    async refreshOrders() {
      await this.fetchOrders()
    },

    // 获取订单列表
    async fetchOrders() {
      try {
        this.loading = true
        const response = await orderService.getOrders()
        console.log('订单API响应:', response)
        if (response && response.code === 200) {
          // 兼容Entity Framework的$values格式
          let rawData = response.data // 保存原始的response.data以供后续处理
          let ordersData = [] // 用于存储最终的订单数组

          if (!Array.isArray(rawData)) {
            console.warn('API返回的订单数据不是数组格式，尝试转换:', rawData)
            if (rawData && typeof rawData === 'object') {
              if (rawData.$values && Array.isArray(rawData.$values)) {
                ordersData = rawData.$values
                console.log('找到Entity Framework格式的订单数组数据:', ordersData)
              } else {
                const possibleArrayKeys = ['items', 'list', 'orders', 'data', 'result']
                for (const key of possibleArrayKeys) {
                  if (Array.isArray(rawData[key])) {
                    ordersData = rawData[key]
                    console.log(`找到订单数组数据在属性 ${key}:`, ordersData)
                    break
                  }
                }
                if (!Array.isArray(ordersData)) {
                  console.warn('无法找到订单数组数据，将对象转换为数组')
                  ordersData = Object.values(rawData)
                }
              }
            } else {
              ordersData = []
            }
          } else {
            ordersData = rawData // 如果已经是数组，直接使用
          }
          
          // --- 构建ID映射表以解析$ref引用 ---

          const idMap = new Map();
          // 辅助函数：递归地收集所有带有$id的对象
          // (collectIds函数已移至methods中，并通过this.collectIds调用)
          this.collectIds(response, idMap); // 从原始响应数据开始收集所有ID
          
          // 第二次遍历订单数据，解析$ref并发起额外请求
          const processedOrders = await Promise.all(ordersData.map(async order => {
            if (order.$ref && typeof order.$ref === 'string') {
              const refId = order.$ref;
              let fullObject = idMap.get(refId); // 从全局ID映射中查找
              
              if (!fullObject) {
                console.warn(`未找到引用 ${refId} 对应的完整对象在ID映射中，尝试发起单独请求`);
                try {
                  const res = await orderService.getOrderById(refId); // 发起新请求
                  if (res && res.code === 200 && res.data) {
                    fullObject = res.data; // 获取到完整对象
                    // 将新获取到的完整对象也添加到idMap中，以防后续有对它的引用
                    this.collectIds(fullObject, idMap);
                    console.log(`成功通过单独请求获取到引用 ${refId} 的完整订单，并更新ID映射`);
                  } else {
                    console.error(`单独请求获取引用 ${refId} 的订单失败:`, res);
                  }
                } catch (error) {
                  console.error(`单独请求获取引用 ${refId} 的订单异常:`, error);
                }
              }
              // 如果仍然未找到，则使用原始的$ref对象，后续处理会将其标记为未知
              return fullObject || order; 
            } else {
              return order;
            }
          }));

          // 处理订单数据，正确获取买家、商品和卖家信息
          this.orders = processedOrders.map(actualOrder => {
            console.log('处理单个订单记录:', actualOrder)
            
            // 解析嵌套的商品引用
            const orderProduct = this.resolveRef(actualOrder.product || actualOrder.Product, idMap);
            // 解析嵌套的买家用户引用
            const orderBuyerUser = this.resolveRef(actualOrder.user || actualOrder.User, idMap);
            // 解析嵌套的卖家用户引用（如果直接在订单中）
            const orderSellerUserFromOrder = this.resolveRef(actualOrder.sellerUser || actualOrder.SellerUser, idMap);

            // --- 提取买家信息 ---
            let buyerNickname = '未知买家'
            let buyerUserId = null;

            // 优先使用已解析的买家用户对象
            if (orderBuyerUser) {
                buyerUserId = orderBuyerUser.userId || orderBuyerUser.id || orderBuyerUser.user_id || orderBuyerUser.UserId;
            } else if (actualOrder.userId || actualOrder.UserId) { // 如果没有解析到的买家用户对象，则回退到订单根部的 userId
                buyerUserId = actualOrder.userId || actualOrder.UserId;
            }

            const buyerUser = this.getUserById(buyerUserId);
            if (buyerUser) {
              buyerNickname = buyerUser.nickname || buyerUser.Nickname || '未知买家';
            }
            
            // --- 提取商品和卖家信息 ---
            let productTitle = '未知商品';
            let price = 0;
            let sellerNickname = '未知卖家';
            let productId = null;
            let product = null;

            // 优先使用已解析的商品对象
            if (orderProduct) {
                productId = orderProduct.productId || orderProduct.id || orderProduct.product_id || orderProduct.ProductId;
                product = orderProduct;
            } else if (actualOrder.productId || actualOrder.ProductId) { // 如果没有解析到的商品对象，则回退到订单根部的 productId
                productId = actualOrder.productId || actualOrder.ProductId;
                product = this.getProductById(productId); // 仍然需要从 this.products 中获取完整商品对象
            }

            if (product) {
              productTitle = product.title || product.Title || '未知商品';
              price = product.price || product.Price || 0;
              
              let sellerUserId = null;
              // 优先使用从订单中直接解析出的卖家用户
              if (orderSellerUserFromOrder) {
                sellerUserId = orderSellerUserFromOrder.userId || orderSellerUserFromOrder.id || orderSellerUserFromOrder.user_id || orderSellerUserFromOrder.UserId;
              } else { // 否则尝试从商品对象中解析卖家用户
                const productSellerUser = this.resolveRef(product.user || product.User, idMap);
                if (productSellerUser) {
                  sellerUserId = productSellerUser.userId || productSellerUser.id || productSellerUser.user_id || productSellerUser.UserId;
                } else if (product.userId || product.UserId) { // 回退到商品根部的 userId
                    sellerUserId = product.userId || product.UserId;
                }
              }

              const sellerUser = this.getUserById(sellerUserId);
              if (sellerUser) {
                sellerNickname = sellerUser.nickname || sellerUser.Nickname || '未知卖家';
              }
            }
            
            console.log('买家昵称:', buyerNickname);
            console.log('商品标题:', productTitle);
            console.log('卖家昵称:', sellerNickname);
            console.log('价格:', price);
            
            return {
              ...actualOrder,
              orderId: actualOrder.orderId || actualOrder.order_id || actualOrder.id || '未知订单',
              productTitle: productTitle,
              buyerNickname: buyerNickname,
              sellerNickname: sellerNickname,
              price: price,
              status: actualOrder.status || '待付款',
              createTime: actualOrder.createTime || actualOrder.create_time || actualOrder.createDate,
              updateTime: actualOrder.updateTime || actualOrder.update_time || actualOrder.updateDate
            }
          })
        } else {
          console.error('API返回错误:', response)
          this.orders = []
          Message.error(response?.message || '获取订单列表失败')
        }
      } catch (error) {
        console.error('获取订单列表失败:', error)
        this.orders = []
        Message.error(error?.response?.data?.message || '获取订单列表失败')
      } finally {
        this.loading = false
      }
    },

    // 搜索
    handleSearch() {
      // 搜索逻辑已通过计算属性实现
    },

    // 查看订单详情
    handleView(row) {
      this.currentOrder = row
      this.detailDialogVisible = true
    },

    // 更新订单状态
    async handleUpdateStatus(row, status) {
      const statusMap = {
        '待发货': '发货',
        '运输中': '开始运输',
        '待收货': '到达目的地',
        '已完成': '确认收货',
        '已取消': '取消',
        '已拒收': '拒收'
      }
      
      try {
        await MessageBox.confirm(
          `确定要${statusMap[status]}该订单吗？`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        await orderService.updateOrderStatus(row.orderId, status)
        Message.success(`${statusMap[status]}成功`)
        await this.fetchOrders()
      } catch (error) {
        if (error !== 'cancel') {
          console.error('更新订单状态失败:', error)
          Message.error(error?.response?.data?.message || '更新失败')
        }
      }
    },

    // 获取状态标签
    getStatusLabel(status) {
      const labels = {
        '待付款': '待付款',
        '已完成': '已完成',
        '已取消': '已取消',
        '待发货': '待发货',
        '运输中': '运输中',
        '待收货': '待收货',
        '退货中': '退货中',
        '换货中': '换货中',
        '退款中': '退款中',
        '部分退款': '部分退款',
        '已拒收': '已拒收',
        '售后处理中': '售后处理中',
        '冻结': '冻结'
      }
      return labels[status] || status
    },

    // 获取状态类型
    getStatusType(status) {
      const types = {
        '待付款': 'warning',
        '已完成': 'success',
        '已取消': 'info',
        '待发货': 'warning',
        '运输中': 'primary',
        '待收货': 'warning',
        '退货中': 'warning',
        '换货中': 'warning',
        '退款中': 'warning',
        '部分退款': 'warning',
        '已拒收': 'info',
        '售后处理中': 'warning',
        '冻结': 'info'
      }
      return types[status] || 'info'
    },

    // 格式化日期
    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      return d.toLocaleString()
    },

    // 获取用户列表
    async fetchUsers() {
      try {
        const response = await userService.getUsers()
        console.log('用户API响应:', response)
        if (response && response.code === 200) {
          // 处理Entity Framework格式的数据
          let data = response.data
          if (data && typeof data === 'object') {
            if (data.$values && Array.isArray(data.$values)) {
              data = data.$values
              console.log('找到Entity Framework格式的用户数组数据:', data)
            } else if (Array.isArray(data)) {
              console.log('数据本身就是数组格式:', data)
            } else {
              const possibleArrayKeys = ['items', 'list', 'users', 'data', 'result']
              for (const key of possibleArrayKeys) {
                if (Array.isArray(data[key])) {
                  data = data[key]
                  console.log(`找到用户数组数据在属性 ${key}:`, data)
                  break
                }
              }
              if (!Array.isArray(data)) {
                console.warn('无法找到用户数组数据，设置为空数组')
                data = []
              }
            }
          } else {
            data = []
          }
          
          this.users = data || []
          console.log('用户列表:', this.users)
          console.log('用户列表长度:', this.users.length)
        } else {
          console.error('API返回错误:', response)
          this.users = []
          Message.error(response?.message || '获取用户列表失败')
        }
      } catch (error) {
        console.error('获取用户列表失败:', error)
        this.users = []
        Message.error(error?.response?.data?.message || '获取用户列表失败')
      }
    },

    // 获取商品列表
    async fetchProducts() {
      try {
        const response = await productService.getProducts()
        console.log('商品API响应:', response)
        if (response && response.code === 200) {
          // 处理Entity Framework格式的数据
          let data = response.data
          if (data && typeof data === 'object') {
            if (data.$values && Array.isArray(data.$values)) {
              data = data.$values
              console.log('找到Entity Framework格式的商品数组数据:', data)
            } else if (Array.isArray(data)) {
              console.log('数据本身就是数组格式:', data)
            } else {
              const possibleArrayKeys = ['items', 'list', 'products', 'data', 'result']
              for (const key of possibleArrayKeys) {
                if (Array.isArray(data[key])) {
                  data = data[key]
                  console.log(`找到商品数组数据在属性 ${key}:`, data)
                  break
                }
              }
              if (!Array.isArray(data)) {
                console.warn('无法找到商品数组数据，设置为空数组')
                data = []
              }
            }
          } else {
            data = []
          }
          
          this.products = data || []
          console.log('商品列表:', this.products)
          console.log('商品列表长度:', this.products.length)
        } else {
          console.error('API返回错误:', response)
          this.products = []
          Message.error(response?.message || '获取商品列表失败')
        }
      } catch (error) {
        console.error('获取商品列表失败:', error)
        this.products = []
        Message.error(error?.response?.data?.message || '获取商品列表失败')
      }
    },

    // 根据用户ID获取用户信息
    getUserById(userId) {
      if (!userId || !this.users.length) return null;
      const searchId = String(userId).toLowerCase(); // 转换为小写字符串进行比较
      console.log(`getUserById: 搜索ID: ${searchId}`);
      
      // 尝试多种字段匹配，支持camelCase和PascalCase
      const foundUser = this.users.find(user => {
        const currentUserId = String(user.userId || user.user_id || user.id || user.UserId || '').toLowerCase();
        // console.log(`  比较用户ID: ${currentUserId}`); // 可以取消注释以查看所有比较
        return currentUserId === searchId;
      });
      if (!foundUser) {
        console.warn(`getUserById: 未找到ID为 ${searchId} 的用户`);
      }
      return foundUser;
    },

    // 根据商品ID获取商品信息
    getProductById(productId) {
      if (!productId || !this.products.length) return null;
      const searchId = String(productId).toLowerCase(); // 转换为小写字符串进行比较
      console.log(`getProductById: 搜索ID: ${searchId}`);
      
      // 尝试多种字段匹配，支持camelCase和PascalCase
      const foundProduct = this.products.find(product => {
        const currentProductId = String(product.productId || product.product_id || product.id || product.ProductId || '').toLowerCase();
        // console.log(`  比较商品ID: ${currentProductId}`); // 可以取消注释以查看所有比较
        return currentProductId === searchId;
      });
      if (!foundProduct) {
        console.warn(`getProductById: 未找到ID为 ${searchId} 的商品`);
      }
      return foundProduct;
    },

    // 辅助函数：递归地收集所有带有$id的对象
    collectIds(obj, map) {
      if (typeof obj === 'object' && obj !== null) {
        if (obj.$id) {
          map.set(obj.$id, obj);
        }
        // 如果是数组，则遍历每个元素
        if (Array.isArray(obj)) {
          obj.forEach(item => this.collectIds(item, map)); // 递归调用自身
        } else { // 如果是对象，则遍历其属性
          for (const key in obj) {
            if (Object.prototype.hasOwnProperty.call(obj, key)) {
              this.collectIds(obj[key], map); // 递归调用自身
            }
          }
        }
      }
    },

    // 辅助函数：解析$ref引用
    resolveRef(obj, idMap) {
      if (typeof obj === 'object' && obj !== null && obj.$ref) {
        const refId = obj.$ref;
        const resolved = idMap.get(refId);
        if (resolved) {
          return resolved;
        } else {
          console.warn(`resolveRef: 未能在ID映射中找到引用 ${refId} 对应的对象`);
          return obj; // 如果未找到，返回原始对象
        }
      }
      return obj; // 不是$ref，直接返回
    }
  }
}
</script>

<style scoped>
.order-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-left h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
  font-weight: 500;
}

.stats-row {
  margin-bottom: 20px;
}

.stats-card {
  .stats-content {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .stats-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #409EFF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;

    &.pending {
      background-color: #E6A23C;
    }

    &.confirmed {
      background-color: #67C23A;
    }

    &.completed {
      background-color: #909399;
    }
  }

  .stats-info {
    .stats-number {
      font-size: 24px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 5px;
    }

    .stats-label {
      font-size: 14px;
      color: #909399;
    }
  }
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.delete-btn {
  color: #F56C6C;
}

.delete-btn:hover {
  color: #f78989;
}

.order-detail {
  padding: 20px;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.detail-item .label {
  width: 100px;
  color: #606266;
  font-weight: bold;
}
</style> 